<!--首页中间内容-->
<template>
	<div>
		<Swiper></Swiper>
	<div class="wrap">		
		<!--轮播下边的图-->
		<div class="Picture">
			<span v-for="itme in objArr">
				<img :src="itme.img" alt="" />
			</span>
		</div>
		<!--秒杀部分-->
		<div class="Timer">		
				<img src="../../assets/image/img_55.png"/>
				<span class="Timer_fri">礼拜五</span>
				<em>Friday</em>		
			<div class="Timer_action">
				<span>距离开始</span>
				<ul>
					<li>5天</li>
					<li>15</li>
					<li>35</li>
					<li>20</li>
				</ul>
				<a href="###">更多>></a>
			</div>		
		</div>	
		<!--商品展示-->
		
		<div v-for='k in fruit' class="Fruit">
			<img :src="k.img"/>
			<p>{{k.title}}</p>
			<p>{{k.count}}</p>
			<p>{{k.price}}</p>
		</div>

	</div>
	</div>
</template>

<script>
	import Swiper from '../Swiper.vue'
	export default{
		name:'FirstPage',
		components:{
			Swiper
		},	
		data:function(){
			return {
				objArr:[{
					img:require('../../assets/image/1477535879580.png')
				},{
					img:require('../../assets/image/1478244295004.png')
				},{
					img:require('../../assets/image/1478244374905.png')
				},{
					img:require('../../assets/image/1478244430106.png')
				}],
				fruit:[{
					img:require("../../assets/image/0005.png"),title:'新西兰佳沛黄金奇异果', count:'6个装',price:'¥28.6'
				},{
					img:require('../../assets/image/0005.png'),title:'新西兰佳沛黄金奇异果', count:'6个装',price:'¥28.6'
				},{
					img:require('../../assets/image/0005.png'),title:'新西兰佳沛黄金奇异果', count:'6个装',price:'¥28.6'
				},{
					img:require('../../assets/image/0005.png'),title:'新西兰佳沛黄金奇异果', count:'6个装',price:'¥28.6'
				}]
			}		
		}
	}
</script>

<style scoped>
	.wrap{		
		width: 1280px;
		margin: 40px auto;
		font-size: 0;
	}
	.Picture {
		margin-top: 15px ;
		margin-bottom: 15px;
	}
	.Picture span {
		margin-right:15px;
	}
	/*时间秒杀*/
	.Timer{
		width: 1280px;
		height: 100px;
		background: #ebffe8;
		border-bottom:1px solid #498e3d;
	}
	.Timer img{
		vertical-align: -7px;
		margin-left: 30px;
	}
	.Timer em{
		line-height: 100px;
		font-size: 20px;
		color: #a4a7a4;
		font-style: normal;
		font-weight: 200;
	}
	.Timer_fri{
		margin-left: 20px;
		margin-right: 20px;
		line-height: 100px;
		font-size: 27px;
		color: #498e3d;
		font-weight: 200;
	}
	.Timer_action{
		width:502px;
		line-height: 50px;
		font-size: 20px;
		float: right;
		text-align: right;
		margin-right: 19px;
		margin-top:25px;
	}
	.Timer_action span {
		font-size: 19px;
		color: #498e3d;
	}
	.Timer_action ul{
		display: inline-block;
		margin-left: 20px;
		margin-right: 30px;
	}
	.Timer_action li{
		width:60px;
		height: 40px;
		line-height: 40px;
		display: inline-block;
		font-size: 17px;
		font-weight: 100;		
		background: #F08200;
		color: white;
		text-align: center;	
		border-radius:5px ;
		margin-right: 10px;
	}
	.Timer_action a{
		font-size: 19px;
		color: #6f706f;
	}
	/**/
	.Fruit{
		display: inline-block;
		width: 300px;
		background: #f8f6f7;
		margin-right: 20px;
	}
	.Fruit p{
		margin-right: 10px;
		font-size: 20px;
		text-align: center;		
	}
	.Fruit img{
		width:300px;
		height:306px;
	}	
</style>